{{extend './layouts/layout.html'}}

{{block 'head'}}
<style>
  #batchDeleteBtn {
    float: right;
    margin: 10px 5px 0 0;
  }
</style>
{{/block}}

{{block 'content'}}
<div class="container-fluid">
  <div class="page-title">
    <h1>所有文章</h1>
    <a href="/admin/post-add" class="btn btn-primary btn-xs">写文章</a>
  </div>
  <!-- 有错误信息时展示 -->
  <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
  <div class="page-action">
    <!-- show when multiple checked -->
    <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
    <form class="form-inline">
      <select name="" class="form-control input-sm">
        <option value="">所有分类</option>
        <option value="">未分类</option>
      </select>
      <select name="" class="form-control input-sm">
        <option value="">所有状态</option>
        <option value="">草稿</option>
        <option value="">已发布</option>
      </select>
      <button class="btn btn-default btn-sm">筛选</button>
    </form>
    <ul class="pagination pagination-sm pull-right">
      <li><a href="#">上一页</a></li>
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">下一页</a></li>
    </ul>
    <div>
      <button id="batchDeleteBtn" class="btn btn-danger btn-xs">批量删除</button>
    </div>
  </div>
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th class="text-center" width="40"><input type="checkbox" name="checkboxAll"></th>
        <th>标题</th>
        <th>作者</th>
        <th>分类</th>
        <th class="text-center">发表时间</th>
        <th class="text-center">状态</th>
        <th class="text-center" width="100">操作</th>
      </tr>
    </thead>
    <tbody>
      {{each list item}}
      <tr>
        <td class="text-center"><input type="checkbox" name="checkOne" data-id="{{item.article_id}}"></td>
        <td>{{item.article_title}}</td>
        <td>{{item.admin_nickname}}</td>
        <td>{{item.cate_name}}</td>
        <td class="text-center">{{item.article_addtime}}</td>
        <td class="text-center">{{item.article_status}}</td>
        <td class="text-center">
          <a href="/admin/post-edit?id={{item.article_id}}" class="btn btn-default btn-xs">编辑</a>
          <a href="javascript:;" data-id="{{item.article_id}}" class="deleteBtn btn btn-danger btn-xs">删除</a>
        </td>
      </tr>
      {{/each}}
    </tbody>
  </table>
</div>
{{/block}}

{{block 'script'}}
<script>
  const $checkOne = $('input[name=checkOne]')
  $('input[name=checkboxAll]').on('change', chooseAll)
  $('.deleteBtn').on('click', deleteSinglePost)
  $('#batchDeleteBtn').on('click', batchDeletePost)

  /**
   * 方法区
  */
  // 批量删除按钮选择所有复选框
  function chooseAll(e) {
    console.log($checkOne)
    console.log(e.target.checked)
    if (e.target.checked) {
      $checkOne.each((index, item) => {
        item.checked = true
      })
    } else {
      $checkOne.each((index, item) => {
        item.checked = false
      })
    }
  }

  // 删除单篇文章
  function deleteSinglePost(e) {
    console.log(e.target.dataset.id)
    console.log($(this).data('id'))
    if (!window.confirm('确定要删除吗？')) return
    $.ajax({
      url: '/api/post/singleDelete',
      type: 'post',
      data: {id: $(this).data('id')},
      dataType: 'json',
      success: res => {
        console.log('post-single-delete-res---', res)
        if (res.success) window.location.reload()
      },
      error: err => {
        console.log(err)
      }
    })
  }

  // 批量删除文章
  function batchDeletePost() {
    if (!window.confirm('确定要删除吗？')) return
    const ids = []
    $checkOne.each((index, item) => {
      if (item.checked) {
        ids.push(item.dataset.id)
      }
    })
    $.ajax({
      url: '/api/post/batchDelete',
      type: 'post',
      data: {ids: ids.join(',')},
      dataType: 'json',
      success: res => {
        console.log('post-batchDelete-res---', res)
        if (res.success) window.location.reload()
      },
      error: err => {
        console.log(err)
      }
    })
  }
</script>
{{/block}}